画像やレイヤーを半透明のグラデーションで表示する
画像やレイヤーを半透明のグラデーションで表示する 前回の講座で紹介した「filter:Alpha()」には、画像やレイヤーを半透明のグラデーションで表示する機能も装備されています。今回は、「filter:Alpha()」の利用方法をより詳しく紹介していきます。

→ 半透明のグラデーションで表示する
 
画像やレイヤーをグラデーションで表示するには、「filter:Alpha()」のカッコ内に「style」「opacity」「finishopacity」といった3つの属性を記述します。通常、「style」の値は1とし、「opacity」にはグラデーションの開始透明度(0〜100)、「finishopacity」にはグラデーションの終了透明度(0〜100)を指定します。たとえば、透明度80%→20%で画像をグラデーション表示するには、以下のように記述します。
なお、前回の講座でも解説したように、「filter:Alpha()」はInternet Explorer独自のスタイルシートとなるため、Netscapeではグラデーション表示を実現できません。
<IMG src="photo1.jpg" style="filter:Alpha(style=1,opacity=80,finishopacity=20)">


→ グラデーションの形式を変更する
 
「filter:Alpha()」の「style」の値を変更すると、「左→右」以外の方向にもグラデーション表示できます。「style」はグラデーションの形式を指定する属性であり、その値により3種類のグラデーションが用意されています。たとえば、円形状にグラデーションさせる場合は、以下のように記述します。
<IMG src="photo1.jpg"
  style="filter:Alpha(style=2,opacity=100,finishopacity=0)">


→ グラデーションの開始/終了位置を指定する
 
「filter:Alpha()」では、グラデーションの開始位置と終了位置を指定することも可能です。グラデーションの開始位置は、X座標を「startx」、Y座標を「starty」で指定します。同様に、グラデーションの終了位置は「finishx」、Y座標を「finishy」で指定します。たとえば、開始位置を(100,0)、終了位置を(100,150)に指定すると、上下の方向にグラデーション表示させることができます。
<IMG src="photo1.jpg"
  style="filter:Alpha(style=1,opacity=100,finishopacity=0,
    startx=100,starty=0,finishx=100,finishy=150)">


yVoC[UNLIMIT1~] ECir|C Yahoo yV LINEf[^[z500~`I


z[y[W NWbgJ[h COiq O~yz COsI COze